<div class="add_form">
  <div class="txbox">
    <input name="title" type="text" class="ftitle focus font14" placeholder="请在这里输入标题"/>
  </div>
  <textarea name="content" cols="" rows="" class="ftextarea font14" placeholder="请在这里输入内容"></textarea>
  <div class="other">
    <div class="addimg J_addbtn"></div>
  </div>
  
  <div class="imgbox">
    <div class="ili"></div> <!--封面容器-->
    <div class="ili add J_addbtn"></div>
    <input id="browseFile" type="file" style="display: none;">
  </div>
  
  
  <div class="selbox J_select_cat">
    <div class="tit">文章分类：</div>
    <div class="txt">
      <span class="J_cat_cn">请选择分类</span>
      <input name="category1" type="hidden" value="0"/>
      <input name="category2" type="hidden" value="0"/>
    </div>
  </div>
  
  <div class="tags_tit">选择标签：</div>
  <div id="tags_list" class="tags font10">
    
    <div class="refresh_tag" id="J_get_tags">换一批</div>
  </div>
  
  <div class="tags_tit">已选标签：</div>
  <div id="tags_checked" class="tags font10">
  </div>


</div>
<script>
    $(".J_select_cat").on("click", function () {
        select_classify(2, 0);
    });
</script>
<script>
$(document).ready(function(){
    // 提交回答
    $(".J_confirm").on('click', function () {
        var btn = $(this);

        if (btn.hasClass('disabled')) {
            return false;
        }
        btn.addClass('disabled');

        // 提交数据
        var postData = {};
        // 标题
        var title = $.trim($("input[name='title']").val());
        if (title == '') {
            toast('标题不能为空');
            btn.removeClass('disabled');
            return false;
        }
        postData.title = title;
        // 内容
        var content = $.trim($("textarea[name='content']").val());
        if (content == '') {
            toast('内容不能为空');
            btn.removeClass('disabled');
            return false;
        }
        postData.content = content;
        // 分类
        var category1 = $("input[name='category1']").val();
        var category2 = $("input[name='category2']").val();
        if (category1 == '0') {
            toast('请选择分类', 0);
			select_classify(2, 0);
            btn.removeClass('disabled');
            return false;
        }
        postData.category1 = category1;
        postData.category2 = category2;
        // 缩略图
        postData.img = $("input[name='img']").val();
        // 话题
        var cktags = $("input[name='tags[]']").map(function () {
            return $(this).val();
        }).get();
        postData.tag = cktags;
        console.log(postData);

        // 保存文章
        var ajax_article_save = '{:U("wechat/article/ajax_article_save")}';
        $.post(ajax_article_save, postData, function (res) {
            console.log(res);
            if (res.code == 0) {
                toast(res.msg);
            } else {
                toast(res.msg, 1);
                setTimeout(function () {
                    window.location.reload();
                }, 1800);
            }
        });
    });

    // 添加图片
    $(".J_addbtn").on('click', function () {
        $("#browseFile").trigger('click');  // 触发选择图片上传
    });

    // 上传图片
    $('#browseFile').localResizeIMG({
        width: 400,
        quality: 1,
        success: function (result) {
            var submitData = {
                base64_string: result.clearBase64,
            };
            NProgress.start();
            $.ajax({
                type: "POST",
                url: "{:U('wechat/ajax/ajax_upload_img')}",
                data: submitData,
                dataType: "json",
                success: function (res) {
                    var img = '<img src="' + res.data.src + '"><input type="hidden" name="img" value="' + res.data.id + '">';
                    var $imgboxli = $(".imgbox .ili:not(.add)");
                    $imgboxli.empty().append(img);
                    refreshImgbox();
                },
                complete: function (XMLHttpRequest, textStatus) {
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }
    });

    /* 移除图片 */
    $(".imgbox .ili:not(.add)").on('click', function () {
        $(this).empty();
        refreshImgbox();
    });

    /* 获取标签列表 */
    var page = 0;
    $("#J_get_tags").on('click', function () {
        $.getJSON('{:U("wechat/question/ajax_get_tags")}', {p: page + 1}, function (res) {
            var list = res.data.tags;
            var $tags = $("#tags_list");
            $tags.find('.tli').remove();  // 清空候选标签
            for (var i in list) {
                var tag = list[i];
                $tags.find('.refresh_tag').before('<div class="tli">' + tag + '</div>');
            }
            page = res.data.page;
            selectTag();
            refreshCkTags();
        });
    }).trigger('click');

    

    /* 删除已选择标签 */
    $("#tags_checked").on('click', '.tli', function () {
        $(this).remove();
        refreshCkTags();
    });
});
    

/* 刷新选中标签 */
function refreshCkTags() {
    var cktags = [];
    $("#tags_checked .tli").each(function () {
        cktags.push($(this).text());
    });

    $("#tags_list .tli").each(function () {
        if ($.inArray($(this).text(), cktags) === -1) {
            $(this).removeClass('select');
        } else {
            $(this).addClass('select');
        }
    });
}

/* 刷新已选图片容器 */
function refreshImgbox() {
    var $imgbox = $(".imgbox");
    var $imgboxli = $(".imgbox .ili:not(.add)");
    if ($imgboxli.html()) {
        $imgbox.show();
    } else {
        $imgbox.hide();
    }
}

/* 选择/取消选择候选标签 */
function selectTag() {
    $("#tags_list .tli").off().on('click', function () {
        var $cktagsTli = $("#tags_checked .tli");

        var cktags = [];  // 已选中的标签
        $cktagsTli.each(function () {
            cktags.push($(this).text());
        });

        var tag = $(this).text();
        if ($.inArray(tag, cktags) === -1) {
            if ($cktagsTli.length >= 3) {
                toast('最多只能选择3个标签');
                return;
            }
            $("#tags_checked").append('<div class="tli">' + tag + '<input type="hidden" name="tags[]" value="' + tag + '">' + '</div>');
        } else {
            $cktagsTli.each(function () {
                if ($(this).text() == tag) {
                    $(this).remove();
                    return false;
                }
            });
        }
        refreshCkTags();
    });
}

refreshImgbox();

</script>